<script setup>
const props = defineProps({
  catTurboData: {
    type: Boolean,
  },
  lf: {
    type: Object,
  },
})
const emit = defineEmits(['catData', 'catTurboData'])
const undoDisable = ref(true)
const redoDisable = ref(true)
const submitDisable = ref(true)

onMounted(() => {
  if (props.lf) {
    const graphData = props.lf.getGraphData()
    const nodes = graphData.nodes
    submitDisable.value = nodes.length === 0
  }
  props.lf && props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
    undoDisable.value = !undoAble
    redoDisable.value = !redoAble
    const graphData = props.lf.getGraphData()
    const nodes = graphData.nodes
    const hasStart = nodes.filter(k => k.flow_type === 'start').length > 0
    const hasEnd = nodes.filter(k => k.flow_type === 'end').length > 0
    submitDisable.value = nodes.length === 0
  })
})

function zoomIn() {
  props.lf.zoom(true)
}

function zoomOut() {
  props.lf.zoom(false)
}

function zoomReset() {
  props.lf.resetZoom()
}

function translateReset() {
  props.lf.resetTranslate()
}

function reset() {
  props.lf.resetZoom()
  props.lf.resetTranslate()
}

function undo() {
  props.lf.undo()
}

function redo() {
  props.lf.redo()
}

function download() {
  props.lf.getSnapshot()
}

function catData() {
  emit('catData')
}

function catTurboData() {
  emit('catTurboData')
}

function showMiniMap() {
  const { lf } = props
  lf.extension.miniMap.show(lf.graphModel.width - 150, 40)
}

function submit() {
  const formRef = ref(null)
  const form = reactive({ name: '', info: '' })
  const rules = reactive({
    name: {
      required: true,
      trigger: 'blur',
      message: '名称为必填项',
    },
    info: {
      required: true,
      trigger: 'blur',
      message: '描述为必填项',
    },
  })
  const data = props.lf.getGraphData()
  console.log('data', data)
  //   ElMessageBox.alert 用code标签 展示 data
  ElMessageBox.alert(data, 'data', {
    dangerouslyUseHTMLString: true,
    type: 'info',
    callback: () => {
      console.log('点击了确认')
    },
  })
}
</script>

<template>
  <div>
    <el-button-group>
      <el-button size="" @click="zoomIn">
        放大
        <el-icon class="ml-1">
          <ZoomIn />
        </el-icon>
      </el-button>
      <el-button size="" @click="zoomOut">
        缩小
        <el-icon class="ml-1">
          <ZoomOut />
        </el-icon>
      </el-button>
      <el-button size="" @click="zoomReset">
        大小适应
      </el-button>
      <el-button size="" @click="translateReset">
        定位还原
      </el-button>
      <el-button size="" :disabled="undoDisable" @click="undo">
        上一步(ctrl+z)
      </el-button>
      <el-button size="" :disabled="redoDisable" @click="redo">
        下一步(ctrl+y)
      </el-button>
<!--      <el-button size="" @click="download">-->
<!--        下载图片-->
<!--      </el-button>-->
<!--      <el-button type="primary" size="" :disabled="submitDisable" @click="submit">-->
<!--        提交-->
<!--      </el-button>-->
      <slot name="button">
      </slot>
    </el-button-group>
  </div>
</template>

<style lang="scss" scoped>

</style>
